

.bg-main {
    @apply bg-gray-50;
    @apply dark:bg-[#171718];
  }
  
  .hover-bg-main {
    @apply hover:bg-gray-200;
    @apply dark:hover:bg-stone-700;
  }
  
  .bg-dc {
    @apply bg-gray-100;
    @apply dark:bg-stone-800;
  }
  
  .bg-view {
    @apply bg-white;
    @apply dark:bg-[#1e1e1f];
  }
  
  .hover-bg-view {
    @apply hover:bg-stone-100;
    @apply dark:hover:bg-stone-800;
  }
  
  .bg-active {
    @apply bg-emerald-400 text-white;
  }
  .text-active{
    @apply text-emerald-400;
  }
  
  .text-main {
    @apply text-slate-700;
    @apply dark:text-slate-200;
  }
  
  .text-dc {
    @apply text-slate-400;
    @apply dark:text-slate-400;
  }
  
  .button {
    @apply flex bg-emerald-600 rounded-full justify-center items-center h-8 text-sm transition-all;
    @apply text-white;
    @apply hover:bg-emerald-700;
  }
  
  .button-outline {
    @apply flex rounded-full justify-center items-center h-8 text-sm transition-all border;
    @apply hover:border-emerald-500 hover:text-emerald-500;
  }
  
  .button-sm{
    @apply h-7 text-xs;
  }
  
  .button-dc{
    @apply flex bg-[#e6e6e6] rounded justify-center items-center h-8 text-sm transition-all cursor-pointer;
    @apply dark:bg-[#303031] dark:text-white;
    @apply hover:text-emerald-500;
  }